Solid Router: Освоение клиентской навигации в SolidJS

SolidJS, известный своей исключительной производительностью и простотой, представляет собой фантастическую основу для создания современных веб-приложений. Для создания по-настоящему увлекательных и удобных для пользователя интерфейсов необходим надежный клиентский маршрутизатор. Встречайте Solid Router, официальный и рекомендуемый маршрутизатор для SolidJS, разработанный для бесшовной интеграции с реактивными принципами фреймворка.

Это исчерпывающее руководство погрузит вас в мир Solid Router, охватывая все от базовой настройки до продвинутых техник для создания сложных и динамичных одностраничных приложений (SPA). Независимо от того, являетесь ли вы опытным разработчиком SolidJS или только начинаете, эта статья вооружит вас знаниями и навыками для освоения клиентской навигации.

Что такое Solid Router?

Solid Router — это легковесный и производительный клиентский маршрутизатор, специально разработанный для SolidJS. Он использует реактивность SolidJS для эффективного обновления пользовательского интерфейса на основе изменений URL в браузере. В отличие от традиционных маршрутизаторов, которые полагаются на сравнение виртуального DOM, Solid Router напрямую манипулирует DOM, что приводит к более быстрой и предсказуемой производительности.

Ключевые особенности Solid Router включают:

• Декларативная маршрутизация: Определяйте маршруты с помощью простого и интуитивно понятного API на основе JSX.
• Динамическая маршрутизация: Легко обрабатывайте маршруты с параметрами, что позволяет создавать динамичные и управляемые данными приложения.
• Вложенные маршруты: Организуйте ваше приложение в логические секции с помощью вложенных маршрутов.
• Компонент Link: Бесшовно перемещайтесь между маршрутами с помощью компонента <A>, который автоматически обрабатывает обновления URL и стилизацию активных ссылок.
• Загрузка данных: Асинхронно загружайте данные перед рендерингом маршрута, обеспечивая плавный пользовательский опыт.
• Переходы: Создавайте визуально привлекательные переходы между маршрутами для улучшения пользовательского опыта.
• Обработка ошибок: Изящно обрабатывайте ошибки и отображайте пользовательские страницы ошибок.
• Интеграция с History API: Бесшовно интегрируется с History API браузера, позволяя пользователям использовать кнопки «назад» и «вперёд».

Начало работы с Solid Router

Установка

Чтобы установить Solid Router, используйте ваш предпочитаемый менеджер пакетов:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Базовая настройка

Ядро Solid Router вращается вокруг компонентов <Router> и <Route>. Компонент <Router> выступает в качестве корня системы маршрутизации вашего приложения, в то время как компоненты <Route> определяют сопоставление между URL и компонентами.

Вот базовый пример:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

В этом примере компонент <Router> оборачивает всё приложение. Компоненты <Route> определяют два маршрута: один для корневого пути («/») и другой для пути «/about». Когда пользователь переходит по одному из этих путей, будет отображен соответствующий компонент (Home или About).

Компонент <A>

Для навигации между маршрутами используйте компонент <A>, предоставляемый Solid Router. Этот компонент похож на обычный HTML-тег <a>, но он автоматически обрабатывает обновления URL и предотвращает полную перезагрузку страницы.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Когда пользователь нажимает на одну из этих ссылок, Solid Router обновит URL в браузере и отобразит соответствующий компонент, не вызывая полной перезагрузки страницы.

Продвинутые техники маршрутизации

Динамическая маршрутизация с параметрами маршрута

Solid Router поддерживает динамическую маршрутизацию, позволяя создавать маршруты с параметрами. Это полезно для отображения контента на основе определенного ID или слага.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

В этом примере сегмент :id в пути является параметром маршрута. Чтобы получить доступ к значению параметра id внутри компонента UserProfile, вы можете использовать хук useParams:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Хук useParams возвращает объект, содержащий параметры маршрута. В данном случае params.id будет содержать значение параметра id из URL. Затем хук createResource используется для загрузки данных пользователя на основе этого ID.

Международный пример: Представьте себе глобальную платформу электронной коммерции. Вы могли бы использовать динамическую маршрутизацию для отображения деталей продукта на основе его ID: /products/:productId. Это позволяет легко создавать уникальные URL для каждого продукта, упрощая пользователям обмен ссылками и добавление в закладки конкретных товаров, независимо от их местоположения.

Вложенные маршруты

Вложенные маршруты позволяют организовать ваше приложение в логические секции. Это особенно полезно для сложных приложений с несколькими уровнями навигации.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

В этом примере компонент <Dashboard> выступает в качестве контейнера для компонентов <Profile> и <Settings>. Маршруты <Profile> и <Settings> вложены в маршрут <Dashboard>, что означает, что они будут отображаться только тогда, когда пользователь находится на пути «/dashboard».

Чтобы отобразить вложенные маршруты внутри компонента <Dashboard>, необходимо использовать компонент <Outlet>:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

Компонент <Outlet> действует как заполнитель, где будут отображаться вложенные маршруты. Когда пользователь переходит на «/dashboard/profile», компонент <Profile> будет отображен внутри компонента <Outlet>. Аналогично, когда пользователь переходит на «/dashboard/settings», компонент <Settings> будет отображен внутри компонента <Outlet>.

Загрузка данных с помощью createResource

Асинхронная загрузка данных перед рендерингом маршрута имеет решающее значение для обеспечения плавного пользовательского опыта. Solid Router бесшовно интегрируется с хуком createResource из SolidJS, делая загрузку данных простой задачей.

Мы уже видели пример этого в компоненте UserProfile ранее, но вот он снова для ясности:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Хук createResource принимает два аргумента: сигнал, который запускает загрузку данных, и функцию, которая эти данные получает. В данном случае сигналом является () => params.id, что означает, что данные будут загружаться всякий раз, когда изменяется параметр id. Функция fetchUser получает данные пользователя из API на основе ID.

Хук createResource возвращает массив, содержащий ресурс (полученные данные) и функцию для повторной загрузки данных. Ресурс — это сигнал, который хранит данные. Вы можете получить доступ к данным, вызвав сигнал (user()). Если данные все еще загружаются, сигнал вернет undefined. Это позволяет отображать индикатор загрузки во время получения данных.

Переходы

Добавление переходов между маршрутами может значительно улучшить пользовательский опыт. Хотя у Solid Router нет встроенной поддержки переходов, он хорошо интегрируется с библиотеками, такими как solid-transition-group, для достижения плавных и визуально привлекательных переходов.

Сначала установите пакет solid-transition-group:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Затем оберните ваши маршруты в компонент <TransitionGroup>:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

В этом примере каждый маршрут обернут в компонент <Transition>. Свойство name указывает префикс CSS-класса для перехода, а свойство duration указывает продолжительность перехода в миллисекундах.

Вам нужно будет определить соответствующие CSS-классы для перехода в вашей таблице стилей:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Этот CSS-код определяет простой переход с появлением/исчезновением. Когда маршрут активируется, применяются классы .fade-enter и .fade-enter-active, заставляя компонент плавно появляться. Когда маршрут покидается, применяются классы .fade-exit и .fade-exit-active, заставляя компонент плавно исчезать.

Обработка ошибок

Изящная обработка ошибок важна для обеспечения хорошего пользовательского опыта. В Solid Router нет встроенной обработки ошибок, но вы можете легко реализовать ее с помощью глобальной границы ошибок (error boundary) или обработчика ошибок для конкретного маршрута.

Вот пример глобальной границы ошибок:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Компонент <ErrorBoundary> перехватывает любые ошибки, возникающие в его дочерних элементах. Свойство fallback указывает компонент, который будет отображаться при возникновении ошибки. В данном случае он отображает параграф с сообщением об ошибке.

Компонент <Suspense> обрабатывает ожидающие промисы, что обычно используется с асинхронными компонентами или загрузкой данных. Он отображает содержимое свойства `fallback` до тех пор, пока промисы не будут разрешены.

Чтобы вызвать ошибку, вы можете выбросить исключение внутри компонента:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Когда этот код будет выполнен, компонент <ErrorBoundary> перехватит ошибку и отобразит запасной компонент.

Международные аспекты: При отображении сообщений об ошибках учитывайте интернационализацию (i18n). Используйте библиотеку для перевода, чтобы предоставлять сообщения об ошибках на предпочитаемом языке пользователя. Например, если пользователь в Японии столкнется с ошибкой, он должен увидеть сообщение об ошибке на японском, а не на английском языке.

Лучшие практики использования Solid Router

• Организуйте ваши маршруты: Используйте вложенные маршруты для организации вашего приложения в логические секции. Это облегчит поддержку и навигацию по вашему коду.
• Используйте параметры маршрута для динамического контента: Используйте параметры маршрута для создания динамических URL для отображения контента на основе определенного ID или слага.
• Загружайте данные асинхронно: Загружайте данные асинхронно перед рендерингом маршрута, чтобы обеспечить плавный пользовательский опыт.
• Добавляйте переходы между маршрутами: Используйте переходы, чтобы улучшить пользовательский опыт и сделать ваше приложение более отполированным.
• Изящно обрабатывайте ошибки: Реализуйте обработку ошибок, чтобы перехватывать и отображать их в удобном для пользователя виде.
• Используйте описательные имена маршрутов: Выбирайте имена маршрутов, которые точно отражают их содержание. Это облегчит понимание структуры вашего приложения.
• Тестируйте ваши маршруты: Пишите юнит-тесты, чтобы убедиться, что ваши маршруты работают корректно. Это поможет вам выявлять ошибки на ранней стадии и предотвращать регрессии.

Заключение

Solid Router — это мощный и гибкий клиентский маршрутизатор, который бесшовно интегрируется с SolidJS. Освоив его возможности и следуя лучшим практикам, вы сможете создавать сложные и динамичные одностраничные приложения, которые обеспечивают плавный и увлекательный пользовательский опыт. От базовой настройки до продвинутых техник, таких как динамическая маршрутизация, загрузка данных и переходы, это руководство предоставило вам знания и навыки для уверенной навигации в мире клиентской маршрутизации в SolidJS. Воспользуйтесь мощью Solid Router и раскройте весь потенциал ваших приложений на SolidJS!

Не забывайте обращаться к официальной документации Solid Router за самой актуальной информацией и примерами: [Ссылка на документацию Solid Router - Заполнитель]

Продолжайте создавать удивительные вещи с SolidJS!